<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="首页" />

    <!-- 上拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 轮播 -->
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
        <!-- 数据列表 -->
        <!-- 加载数据 -->
        <van-cell v-for="item in list" :key="item.id">
          <!-- <router-link :to="{ name: 'Detail', query: { id: item.id } }"> -->
          <van-card :desc="item.desc" :title="item.title" :thumb="item.url" @click="toDetail(item.id)"/>
          <!-- </router-link> -->
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
        require("@/assets/logo.png")
      ],
      list: [],
      page: {
        pageIndex: 0,
        pageSize: 10
      },
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  methods: {
    async onLoad() {
      // setTimeout(() => {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }

      const resp = await axios.get("/api/list",  { params: this.page });

      this.list = this.list.concat(resp.data.data);

      this.loading = false;

      if (this.list.length >= 100) {
        this.finished = true;
      }

      this.page.pageIndex++
      // }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 跳转详情页  动态路由
    toDetail(id) {
      // this.$router.push({ name: "Detail", query: { id } });
      // this.$router.push({ name: 'Detail', params: { id } })
      this.$router.push(`/detail/${id}`)
    }
  }
};
</script>


<style scoped>
img {
  width: 100%;
  height: 200px;
}
</style>